<script setup lang="ts">
// import {useRoute} from "vue-router";
import {Ref, onMounted, ref} from "vue";
import UserCartList from "../../components/UserCartList.vue";
import BlogCartList from '@/components/BlogCartList.vue'
import {getMatchPage} from "@/api/Layout.ts";
import { UserType } from "@/models/user";
import { getBlogList } from "@/api/blog";
import { BlogType } from "@/models/blog";
// import { showFailToast } from "vant";

const userList: Ref<UserType[]> = ref([])
const currentPage = ref(0)
const username = ref('')
// 获取用户
const getUserPage = async () => {
   const res = await getMatchPage(currentPage.value,username.value)
    if (res.code != 0) {
      showFailToast("加载失败" + (res.data.description ? `,${res.data.description}` : ""));
    }
    if (res.data.records.length === 0) {
        finished.value = true;
        return;
    }
    if (res.data.records) {
        res.data.records.forEach((user: { tags: string; }) => {
            if (user.tags) {
                user.tags = JSON.parse(user.tags);
            }
        });
        for (let i = 0; i < res.data.records.length; i++) {
          userList.value.push(res.data.records[i])
        }
        load.value = false
    }
}

// 下滑加载更多 -用户
const finished = ref(false)
const load = ref(false)
const onLoad = async () => {
    currentPage.value++
    await getUserPage()
}

onMounted(() => {
  if(sessionStorage.getItem('tabActive') === '1'){
    active.value = 1
  }
})
// 切换tab栏
const active = ref(0)
const tabChange = (index: string) => {
  sessionStorage.setItem('tabActive',index)
}

// 轮播图
const images = [
    'http://se837qsbo.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240529190911.jpg',
    'http://se837qsbo.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240529190907.jpg',
    'http://se837qsbo.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240529190901.jpg',
    'http://se837qsbo.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240529190843.jpg',
];

// 获取帖子list
const blogLoad = ref(false)
const blogFinished = ref(false)
const title = ref('')
const blogList:Ref<BlogType[]> = ref([])
const blogCurrentPage = ref(0)
const getBlog = async () => {
  const res = await getBlogList(blogCurrentPage.value,title.value)
  if(res.data.code === 0){
    if(res.data.data.records.length>0){
       blogList.value.push(...res.data.data.records)
    }else {
      blogFinished.value = true
    }
    blogLoad.value = false
  }
}
const blogOnLoad = async () => {
  blogCurrentPage.value++
  await getBlog()
}
</script>

<template>
  <van-swipe class="swipe" :autoplay="3000" lazy-render indicator-color="white">
    <van-swipe-item  v-for="image in images" :key="image" >
      <img class="swipeImg" :src="image" />
    </van-swipe-item>
  </van-swipe>
  <van-tabs v-model:active="active" @change="tabChange">
    <van-tab title="匹配用户">
        <div>
          <van-list
            v-model:loading="load"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          <UserCartList :user-list=" userList "></UserCartList>
          </van-list>
        </div>
    </van-tab>
    <van-tab title="热门帖子">
      <van-list
        v-model:loading="blogLoad"
        :finished="blogFinished"
        finished-text="没有更多了"
        @load="blogOnLoad"
      >
        <BlogCartList :blog-list="blogList"></BlogCartList>
      </van-list>
    </van-tab>
  </van-tabs>
  <div>
  </div>
</template>

<style scoped>
.swipe{
  margin: 10px 2px;
}
.swipeImg{
  border-radius: 2%;
  width: 100%;
  height: 150px;
}
</style>